<template>
  <div class="accordion-menu">
    <ul class="menu">
      <li v-for="(item,index) in nav.menus" :key="index">
        <div @click="selectMenu(item,1)" class="lv1" :class="{active:item.code === selected}">
          {{item.name}}
          <span class="toggle-btn" :class="{open: item.show}" v-if="item.children" v-on:click.stop.prevent="slideToggle(index)">
            <i class="iconfont icon-more"></i>
          </span>
        </div>
        <div class="drop" v-if="item.children">
          <div class="lv2-ct" :class="{open: item.show}">
            <div v-for="(subitem,subindex) in item.children" :key="subindex" @click.stop="selectMenu(item,2,subitem,subindex)" :class="{active:subitem.code === selected}" class="lv2">{{subitem.name}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    data () {
      return {
        selected: ''
      }
    },
    props: {
    },
    methods: {
      selectMenu (item, index, subitem, subindex) {
        const guid = `${item.code}/${(subitem || '') && subitem.code}`
        this.selected = guid
        if (item.external) {
          location.href = item.target
          return
        }
        if (index === 1) {
          this.$router.push({ path: this.getLinkTo1(item) });
        } else if (index === 2) {
          this.$router.push({ path: this.getLinkTo2(item, subitem, subindex) });
        }
      },
      slideToggle (index) {
        this.setNavState(index)
      },
      ...mapMutations({
        setSideMenuState: 'SET_SIDE_MENU_STATE',
        setNavState: 'SET_NAV_STATE'
      }),
      getLinkTo1 (item) {
        switch (item.code) {
          case 'MENU_NEWS':
            return `/list/${item.children[0].code}`
          case 'MENU_ABOUT':
            return `/aboutUs/0`
          case 'MENU_INDEX':
            return '/'
          case 'MENU_PRODUCT':
            return `/product/${item.children[0].code}/0`
          default:
            return ''
        }
      },
      getLinkTo2 (item, subitem, subindex) {
        switch (item.code) {
          case 'MENU_NEWS':
            return `/list/${subitem.code}`
          case 'MENU_ABOUT':
            return `/aboutUs/${subindex}`
          case 'MENU_INDEX':
            return '/'
          case 'MENU_PRODUCT':
            return `/product/${subitem.code}/0`
          default:
            return ''
        }
      }
    },
    computed: {
      ...mapGetters([
        'sideMenuShow',
        'nav'
      ])
    },
    mounted () {
    },
    watch: {
      selected () {
        this.setSideMenuState(!this.sideMenuShow)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .menu {
  	min-height: rem(720);
  	li {
  		line-height: rem(100);
  		font-size: rem(28);
  		color: #fff;
  		.lv1 {
  			position: relative;
  			display: block;
  			color: #fff;
  			font-weight: bold;
  			border-bottom: 1px solid #232323;
  			&.active {
  				background-color: #bc2720;
  			}
  			.toggle-btn {
  				position: absolute;
  				right: rem(31);
  				top: 50%;
  				display: block;
  				width: rem(31);
  				height: rem(31);
  				margin-top: rem(-15.5);
  				font-size: rem(31);
  				overflow: hidden;
  				transform: rotate(90deg);
  				transition: all 0.3s;
  				&.open {
  					transform: rotate(-90deg);
  				}
  				.iconfont {
  					position: absolute;
  					left: 0;
  					top: 50%;
  					transform: translate(0, -50%);
  				}
  			}
  		}
  		.lv2 {
  			display: block;
  			height: 0;
  			transition: height 0.3s;
  			overflow: hidden;
  			color: #fff;
  			background-color: #5d5d5d;
  			&.active {
  				background-color: #bc2720;
  			}
  		}
  	}
  }
  .drop .lv2-ct {
  	max-height: 2000px;
  	overflow: hidden;
  	&.open .lv2 {
  		height: rem(101);
  		border-bottom: 1px solid #232323;
  	}
  }
</style>
